<template>
  <div>
    <el-button
      :size="'mini'"
      type="primary"
      icon="el-icon-plus"
      @click="dlg=true"
    >创建</el-button>
    <el-dialog
      title="创建角色"
      :visible.sync="dlg"
      width="550px"
      custom-class="dialog-style"
    >
      <el-form
        :model="form"
        label-position="right"
        label-width="80px"
      >
        <el-form-item label="名称">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!saving" @click="dlg=false">取 消</el-button>
        <el-button type="primary" :loading="saving" @click="handleCreate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { createAccount } from '@/svc/account'

export default {
  name: 'CreateRole',
  props: {
    fnCreate: { type: Function, required: true }
  },
  data() {
    return {
      dlg: false,
      saving: false,
      form: {
        name: ''
      }
    }
  },
  methods: {
    handleCreate() {
      this.saving = true
      this.fnCreate(this, this.form).then(res => {
        this.saving = false
        this.$emit('onCreate', res)
        this.dlg = false
        this.$success('创建成功')
      }).catch(() => {
        this.saving = false
      })
    }
  }
}
</script>

<style scoped>

</style>
